<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基本语法</title> 
<style>
.tooltip{
    position: relative;
    display: inline-block;
    left:100px;
    top:100px;
}
.tooltip .tooltiptext{
    visibility: hidden;
    width:120px;
    background-color: black;
    text-align: center;
    color:white;
    padding:5px 0;
    border-radius: 6px;   

    position: absolute;
    left:30px;
    z-index: 1;

    /* 淡入 - 1秒内从 0% 到 100% 显示: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext{
    visibility: visible;
    opacity: 1;
}
</style>
</head>

<body>
    <div class="tooltip">
        鼠标移到此处
        <span class="tooltiptext">提示文本</span>
    </div>
</body>
</html>